<template>
  <div>
    <el-button type="primary" plain @click="gotoViedoPage">帮助文件</el-button>
    <!--    <el-button type="primary" plain @click="gotoAdd">新增</el-button>-->
    <!--    <ReadCard @duka="onDuKa"></ReadCard>-->
    <div>{{ this.fanhuijieguo }}</div>
    <el-row type="flex" justify="center" align="middle" style="margin-top: 30px">
      <template>
        <el-select v-model="categoryId" placeholder="请选择所属系统">
          <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </template>
      <el-input style="width:35%;" v-model="searchdata" @keyup.enter.native="queryList"
                placeholder="请输入关键字">
        <template slot="append">
          <el-button type="primary" plain @click="queryList">查找</el-button>
          <el-button type="primary" plain @click="myList">查找2</el-button>
        </template>
      </el-input>

    </el-row>
    <div class="infinite-list-wrapper" style="overflow:auto">
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="10">
          <ul
            class="list"
            infinite-scroll-disabled="disabled">
            <li v-for="post in this.postPo" class="list-item" style="margin: 20px ;list-style: none;">
              <!--              {{ i }}-->
              <el-card :body-style="{ padding: '0px' }" shadow="hover">
                <img
                  :src=post.imageurl
                  class="image">
                <div style="padding: 14px;">
                  <span>{{ post.title }}</span>
                  <div class="bottom clearfix">
                    <time class="time">{{ post.createtime }}</time>
                    <el-button @click="gotoDetial(post)" type="text" class="button">查看详情</el-button>
                  </div>
                </div>
              </el-card>
            </li>
          </ul>
          <p v-if="this.isshow">没有更多了</p>
          <!--          <el-pagination-->
          <!--            @size-change="handleSizeChange"-->
          <!--            @current-change="handleCurrentChange"-->
          <!--            :current-page="this.params.page"-->
          <!--            :page-sizes="[5, 10, 30]"-->
          <!--            :page-size="this.params.size"-->
          <!--            layout="total, sizes,prev, pager, next"-->
          <!--            :total="this.total"-->
          <!--          >-->
          <!--          </el-pagination>-->
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import service from '@/utils/http';
import ReadCard from "../components/ReadCard";

export default {
  name: "mainpage",
  components: {ReadCard},
  data() {
    return {
      fanhuijieguo: '',

      total: 0,
      params: {
        page: 1,
        size: 5,
      },
      searchdata: '请先输入关键字,需查询所有请将当前文本删除^_^',
      restaurants: [],
      count: 10,
      loading: false,
      currentDate: new Date(),
      postPo: [],
      categoryId: '0',
      isshow: false,
      options: [],
    }
  },
  computed: {

    // noMore() {
    //   return this.count >= this.postPo.size
    // },
    // disabled() {
    //   return this.loading || this.noMore
    // },
  },
  mounted() {

    this.getTypeList();
  },
  methods: {
    onDuKa(data) {
      this.fanhuijieguo = data;
    },

    handleSizeChange(val) {
      this.params.size = val;
      this.queryList();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.queryList();
    },
    getTypeList() {
      service.post('category/queryAll', {}).then(res => {
        this.options = res;
      })
    },
    myList() {
      this.isshow = false
      service.get('/databaseinfo/kilon/1').then(res => {
        console.log(res)
      })
    },
    queryList() {
      this.isshow = false
      service.post('post/selectAllpage', {
        categoryId: this.categoryId,
        title: this.searchdata,
        pageCode: this.params.page,
        pageSize: this.params.size
      }).then(res => {
        if (res.total === 0) {
          this.isshow = true
        }
        this.postPo = res.list;
        this.total = res.total;
      })
    },
    backIndex() {
      this.$router.push({path: '/'});
    },
    gotoDetial(postpoo) {
      this.$router.push({
        name: 'detialpage',
        params: {
          post: postpoo
        }
      });
    },
    gotoAdd() {
      this.$router.push({
        name: 'addnewPage',
      });
    },
    gotoViedoPage() {
      this.$router.push({
        name: 'viedoPage',
      });
    },
    // load() {
    //   this.loading = true
    //   setTimeout(() => {
    //     this.count += 4
    //     this.loading = false
    //   }, 2000)
    // }
  }
}
</script>

<style scoped>

.time {
  float: left;
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 710px;
  height: 441px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
